<!DOCTYPE html>
<html>
<!-- 曾浩南 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加用户</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body class="layui-layout-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px">
        <button class="layui-btn layui-btn-normal">
            <a href="../view/user/addUser.html">添加用户</a>
        </button>
        <input type="text" id="txtCont" required lay-verify="required" placeholder="关键字查询" style="width: 300px; height: 25px; margin-left: 50px;">
        <!-- //搜索按钮 -->
        <button class="layui-btn layuiadmin-btn-admin layui-btn-sm" lay-submit="" lay-filter="" id="btn_search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
        </button>
        <!-- //搜索按钮 -->
        <table id="table" lay-filter="tables"></table>
    </div>
    <script src="../js/lodash.min.js"></script>
    <script src="../layui/jquery-1.12.4.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            table.render({
                elem: "#table",
                url: "/api/User",
                page: true,//开启分页
                autoSort: false,
                cols: [[ //表头

                    {
                        field: 'mobile',
                        title: '手机/账号'
                    },
                    {
                        field: 'pwd',
                        title: '密码'
                    },
                    {
                        field: 'isAdmin',
                        title: '管理员',
                        sort: true,
                        templet: "#admin"
                    },
                    {
                        field: 'updateTime',
                        title: '注册/添加时间',
                        sort: true,
                        templet: `
                        <div>
                            {{=dateFormat(d.updateTime)}}    
                        </div>
                        `,

                    },
                    {
                        title: '操作',
                        templet:
                            `<div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm" onclick="putes('{{d._id}}')">                   
                                <i class="layui-icon">&#xe642;</i>
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" onclick="dele('{{d._id}}',this)">
                                <i class="layui-icon">&#xe640;</i>
                            </button>
                        </div>`
                    },
                ]]
            });
            table.on('sort(tables)', function (obj) { //排序

                table.reload('table', {
                    initSort: obj,
                    where: {
                        field: obj.field, //排序字段
                        order: obj.type //排序方式
                    }
                });

            });

            form.on('switch(isAdmin)', function (obj) {
                $.ajax({
                    url: "/api/User/" + obj.value,
                    method: "put",
                    data: {
                        isAdmin: obj.elem.checked
                    }
                })
            });


        });
         //查询
        $("#btn_search").click(function () {
            const key = $("#txtCont").val();
            layui.table.reload("table", {
                where: {
                    key,
                    page: 1,
                },
                page: {
                    curr: 1 //重新设置第一页
                }
            });
        })

        function dateFormat(date = new Date(), format = "y-m-d h:i:s") {
            if (typeof date == "string") {
                date = new Date(date);
            }
            const y = date.getFullYear(),
                m = _.padStart(date.getMonth() + 1, 2, "0"),
                d = _.padStart(date.getDate(), 2, "0"),
                h = _.padStart(date.getHours(), 2, "0"),
                i = _.padStart(date.getMinutes(), 2, "0"),
                s = _.padStart(date.getSeconds(), 2, "0")
            return format.replace("y", y).replace("m", m).replace("d", d).replace("h", h).replace("i", i).replace("s",
                s);
        }
        function dele(id, btn) {
            layer.confirm('确定要删除吗?',
                {
                    icon: 3,
                    title: '删除',
                }, function (index) {
                    $.ajax({
                        url: "/api/User/" + id,
                        method: "delete",
                    });
                    $(btn).parents("tr").remove();
                    layer.close(index);
                });
        }

        function putes(id) {
            location.href = "../view/user/updateUser.html?id=" + id;
        }

    </script>

    <script id="admin" type="text/html">
        <input type="checkbox" lay-skin="switch" data-field="isAdmin" lay-filter="isAdmin" value="{{d._id}}" {{d.isAdmin?'checked' : '' }}>
    </script>

</body>

</html>